'use client'
import './index.css'
import { FC, useEffect } from 'react'
import React, {useState } from 'react'
import { Divider } from 'antd'
import Link from 'next/link'
import Login from '@/app/components/login'
import Register from '@/app/components/regsiter'
import Footer from '@/app/components/footer'
import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
import Cookies from 'js-cookie'
import { useRouter } from 'next/navigation';
export type ILoginProps = {
    params: any
    
}

const LoginAndReg:FC<ILoginProps> = () => {

    const router = useRouter()
    const media = useBreakpoints()
    

    const [isActive,setActive] = useState(true)

    const [isPhone,setPhone] = useState(false)
    //let isMobile=false
    useEffect(() => {
      const isMobile = media === MediaType.mobile
      setPhone(isMobile)
    }, []); // 空数组意味着这个effect只在组件挂载时运行一次
    //const isMobile=true
    const getUrlParameter = () => {
      //params ： token，user_id,user_name knowledge_id  4个参数
      const urlParams = new URLSearchParams(window.location.search);
      console.log("urlParams==="+JSON.stringify(urlParams))
      let user_id =urlParams?.get("user_id")||''
      let user_name =urlParams?.get("user_name")||''
      let token =urlParams?.get("token")||''
      let user = user_id+"_"+user_name
      let knowledge_name = urlParams?.get("knowledge_name")||''
      if(token!='')
      {
        Cookies.set("token",token,{expires:100,path:'/'})
        Cookies.set("user",user,{expires:100,path:'/'})
        localStorage.setItem("user_id",user_id)
        localStorage.setItem("user_name",user_name)
        localStorage.setItem("knowledge_name",knowledge_name)
      }
       //跳转首页
       router.push('/')
      return ''
      //http://localhost:3000/home/login?token=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJleHAiOjE3NDgzNDIxMTksInN1YiI6IjMifQ.DqzHRT83yultVpoFDAAp-skQHttGpRBFpfjCF0IwPlQ&user_id=3&user_name=wode&model_id=1
    };
    return (
      <>
      {isPhone &&
       <> 
        <div>{getUrlParameter()}</div>
      </>
      }
      {!isPhone &&
      
        <div className='w-screen h-screen bg-gray-50'>
          <div className=' w-1/3 m-auto border p-10 rounded-xl shadow-xl bg-white absolute top-1/2 right-1/2 translate-x-1/2 -translate-y-1/2 z-10'>   
            <div className=' flex justify-between'>
            <h2 className=' text-center text-2xl'> {isActive?"登录":"注册"}</h2> 
            <div className=' flex justify-between'>
              <Link href="" className={` lgreg text-center text-lg ${isActive?'active':''}`} 
              onClick={()=>setActive(true)}
              >登录1</Link> 
              <Link href="" className={` lgreg text-center text-lg ml-5 ${!isActive?'active':''}`} 
              onClick={()=>setActive(false)}
              >注册</Link> 
            </div> 
            </div>
            <Divider />
            {isActive?<Login/>:<Register onAction={()=>{setActive(true)}}/>}
            
          </div>
          <Footer/>
        </div>
      }
        </>
      );
}
export default React.memo(LoginAndReg)
